<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>css layout</title>
<style type="text/css">
 /* css 로 페이지 레이아웃을 구성  */
 #container{
   width: 1222px; /* left 250(padding 5+5) + main 650(padding 5+5) + border 1+1    */
   border: 1px solid black; /* 테두리 선 */
   margin-left: auto; /* 좌우 여백 동일하게 하여 중앙 정렬 효과 */
   margin-right: auto;
 }
 #header{
  padding: 5px; /* 내용과 테두리 사이 간격 할당 */
   height: 250px;
  border-bottom: 1px solid black;
 }
 #left{
  padding: 5px;
  height: 550px;
  width: 250px;
  float: left; /* 엘리먼트 부유 위치 지정 left , float을 사용해 div 를 수평으로 나란히
         정렬하기 위해 사용    */
 }
 #main{
  padding: 5px;
  height: 550px;
  width: 950px;
  border-left:1px solid black;
  float: left;
 }
 #footer{
   padding-top: 5px;
   border-top: 1px solid black;
   text-align: center;
   height: 120px;
   clear: both; /* float을 사용한 요소 아래에 위치 시킨다. float 속성 초기화 */
 }
</style>
</head>
<body>
<div id="container">
<div id="header"><tiles:insertAttribute name="header" /></div>
<div id="left"><tiles:insertAttribute name="left" /></div>
<div id="main"><tiles:insertAttribute name="main" /></div>
<div id="footer"><tiles:insertAttribute name="footer" /></div>
</div>
</body>
</html>